<template>
  <div class="box1">
    <div class="details">
      <div class="main">
        <h5>
          <span>旅游攻略</span>

          <span> &nbsp;/&nbsp;&nbsp;攻略详情</span>
        </h5>
        <!-- 标题 -->
        <h1>{{ data.title }}</h1>
        <!-- 日期和阅读人数 -->
        <div class="visitNumber">
          <span>攻略：{{ city }}</span>
          <span>阅读：{{ data.watch }}</span>
        </div>

        <div class="print" v-html="data.content">
          <h2>123564654</h2>
          <!-- 文章内容 -->
          {{ data.content }}
          <!-- 图片 -->
        </div>

        <div class="commentShare">
          <span class="comment">
            <div>
              <i class="el-icon-edit-outline"></i>
            </div>
            <p>评论({{ comments.length }})</p>
          </span>
          <span class="share">
            <div>
              <i class="el-icon-share"></i>
            </div>
            <p>分享</p>
          </span>
        </div>

        <!-- 评论部分 -->
        <CommentInputDom @reloadComment="loadComment" />

        <CommentMain
          v-for="comment in commentList"
          :key="comment.id"
          :commentData="comment"
        />
        <!-- 分页 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="currentPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalList"
          ></el-pagination>
        </div>

        <!-- 相关攻略 -->
        <div class="strategy">
          <h3>相关攻略</h3>
          <div class="mian" v-for="item in recommendList" :key="item.id">
            <h4 class="title">{{ item.title }}</h4>
            <div
              class="print"
              v-html="item.content"
              @click="handelClick(item.id)"
            ></div>
            <div class="content">
              <div class="date">
                <span> {{ item.created_at | gettime }}</span>
                <i>阅读 {{ item.watch }}</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommentMain from "../../components/comment/Main";
import CommentInputDom from "../../components/comment/InputDom";
import moment from "moment";
export default {
  data() {
    return {
      data: [],
      recommendList: [],
      city: {},
      comments: [],
      commentId: "",
      commentList: [],

      // 当前页码
      currentPage: 1,
      currentPageSize: 3,
      totalList: 0, // 全部数据总数
    };
  },
  components: {
    CommentMain,
    CommentInputDom,
  },
  filters: {
    gettime(e) {
      console.log(e);
      return moment(e).format("YYYY-MM-DD HH:mm:ss"); //2014-09-24 23:36:09
    },
  },
  created() {
    this.recomment();

    this.loadComment();

    // 推荐文章
    this.$axios({
      url: "/posts/recommend/",
    }).then((res) => {
      console.log("这里是推荐文章", res.data);
      this.recommendList = res.data.data;
    });
  },
  methods: {
    handelClick(id) {
      this.$router.push("/post/detail?id=" + id);
      this.recomment();
    },

    recomment() {
      this.$axios({
        url: "/posts/" + this.$route.query.id,
      }).then((res) => {
        console.log("这里是文章详情");
        console.log(res.data);
        this.data = res.data;
        this.city = res.data.city.created_at;
        this.comments = res.data.comments;
        // console.log(this.data);
        // console.log(this.city);
        // console.log(this.comments);
      });
    },
    //封装获取页面评论
    loadComment() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id, //文章id
          _limit: this.currentPageSize, // 每页条数 3
          _start: (this.currentPage - 1) * this.currentPageSize, // 每一页开始的数据 1
        },
      }).then((res) => {
        // console.log(res);
        this.commentList = res.data.data;
        this.totalList = res.data.total;
        // console.log(this.commentList);
      });
    },

    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 分页
    // 每页显示数据
    handleSizeChange(currentPageSize) {
      this.currentPageSize = currentPageSize;
      this.loadComment();
    },

    // 当前页面
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.loadComment();
    },
  },
};
</script>

<style lang="less" scoped>
.box1 {
  background: url("http://139.180.143.69/_nuxt/img/bg.6c0646f.png") no-repeat
    bottom center;
  background-size: 100%;

  .details {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;

    .main {
      width: 700px;

      h5 {
        span:nth-child(2) {
          color: #999999;
          font-weight: normal;
        }
      }
      h1 {
        padding: 20px 0;
        border-bottom: 1px solid #ccc;
      }
      .visitNumber {
        text-align: right;
        padding: 25px 0;
        span {
          color: #999999;
        }
      }

      .print {
        main {
          padding-bottom: 30px;
        }

        ::v-deep img {
          width: 100%;
        }
      }

      .commentShare {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 30px;
        padding-bottom: 30px;
        .comment {
          text-align: center;
          padding-right: 10px;
          color: #999999;

          i {
            font-size: 40px;
            color: #5dd5c8;
          }
        }
        .share {
          text-align: center;
          padding-left: 10px;
          color: #999999;
          i {
            font-size: 40px;
            color: #5dd5c8;
          }
        }
      }
    }
    .page {
      margin: 20px 0;
    }
    .strategy {
      position: absolute;
      top: 0;
      right: 0;
      width: 280px;
      height: 585px;
      overflow: hidden;
      cursor: pointer;

      h3 {
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        padding: 8px 0;
      }
      /deep/ .mian {
        margin: 3px 0 5px 0;
        width: 300px;

        overflow: hidden;
        word-break: keep-all;
        text-overflow: ellipsis;
        border-bottom: 1px solid #ccc;
        height: 130px;
        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .print {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          height: 86px;
          /deep/ p {
            font-size: 14px;
            color: #0f0e0e;
            margin: 0px 0 5px 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: 100%;
            height: 90px;
            /deep/ img {
              margin-bottom: 5px;

              width: 100px;
              height: 69px;
              object-fit: cover;
            }
          }
        }
        /deep/ .content {
          /deep/ .date {
            margin: 5px 0;
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>